<template>
  <div class="demo">
    <div class="demo-title">登录框</div>
    <div class="demo-content">
      <Form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finish-failed="onFinishFailed"
      >
        <Form.Item
          label="Username"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <Input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </Input>
        </Form.Item>
        <Form.Item
          label="Password"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <Input.Password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </Input.Password>
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" no-style>
            <Checkbox v-model:checked="formState.remember">Remember me</Checkbox>
          </Form.Item>
          <a class="login-form-forgot">Forgot password</a>
        </Form.Item>
        <Form.Item>
          <Button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
            Log in
          </Button>
          Or
          <a>register now!</a>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, reactive } from 'vue';
  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Checkbox from '@sscd/checkbox';
  import Input from '@sscd/input';
  import Form from '@sscd/form';
  interface FormState {
    username: string;
    password: string;
    remember: boolean;
  }
  const formState = reactive<FormState>({
    username: '',
    password: '',
    remember: true,
  });
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const disabled = computed(() => {
    return !(formState.username && formState.password);
  });
</script>
